<template>
  <div class="page-wrap">
    <div class="page-inner">
  

      <div class="page-ctx-wrap">
        <table class="table-box" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th>1级分类</th>
              <th>2级分类</th>
              <!-- <th>年份</th> -->
            </tr>
          </thead>
          <tbody>
            <tr
              class="loop-item"
              data-id="1"
              v-for="(v1, v1_index) in dataList"
              :key="v1_index"
            >
              <td>
                <el-tag
                  class="cus-tag-item"
                  closable
                  :disable-transitions="false"
                  @close="handleCloseV1(v1)"
                >
                  {{ v1.name }}
                </el-tag>

                <!-- <span class="tag-item" :data-id="v1.id"> {{ v1.name }} </span> -->
              </td>
              <td>
                <!-- <span
                  v-for="(v2, v2_index) in v1.children"
                  :key="v2.id"
                  class="tag-item checked"
                  :data-id="v2.id"
                >
                  {{ v2.name }}
                </span> -->

                <el-tag
                  class="cus-tag-item"
                  v-for="(v2, v2_index) in v1.children"
                  :key="v2.id"
                  closable
                  :disable-transitions="false"
                  @close="handleCloseV2(v2)"
                >
                  {{ v2.name }}
                </el-tag>

                <!-- <el-input
                  class="input-new-tag"
                  v-if="v1.inputVisible"
                  v-model="v1.inputValue"
                  :ref="v1.ref"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input> -->

                <input
                  type="text"
                  class="cus-tag-input cus-v2-input"
                  :data-id="v1.id"
                  v-if="v1.inputVisible"
                  v-model="v1.inputValue"
                  :ref="v1.ref"
                  size="small"
                  @keyup.enter="handleInputConfirm(v1)"
                  @blur="handleInputConfirm(v1)"
                />

                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(v1)"
                  >+ 新增</el-button
                >
              </td>
            </tr>

            <!-- 一级分类新增 -->
            <tr>
              <td>
                <input
                  type="text"
                  class="cus-tag-input cus-v1-input"
                  v-if="add_inputVisible"
                  v-model="add_inputValue"
                  ref="add_saveTagInput"
                  size="small"
                  @keyup.enter="add_handleInputConfirm()"
                  @blur="add_handleInputConfirm()"
                />

                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="add_showInput()"
                  >+ 新增</el-button
                >
              </td>
              <td>-</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "news",
  components: {},
  data() {
    return {
      apiConfig: {
        idKey: "newsId",
        list: { method: "get", url: "/app/user/equity/list" },
        add: {
        
          url: "/app/news/information",
          
        },
        delete: { method: "delete", url: "/app/news/information/{newsId}" },
        edit: { method: "put", url: "/app/news/information" },
        detail: { method: "get", url: "/app/news/information/{newsId}" },
      },

      tableColumns: [
        {
          prop: "name",
          label: "标题",
          width: "auto",
          sortable: false, //是否可排序
          show_overflow_tooltip: false, //悬浮是否展示提示
        },
        {
          prop: "img",
          label: "图片",
          width: "auto",
          sortable: false,
          show_overflow_tooltip: false,
          type: "image",
        },
        {
          prop: "remark",
          label: "描述",
          width: "auto",
          sortable: false,
          show_overflow_tooltip: false,
        },
        {
          prop: "orderNum",
          label: "排序值",
          width: "auto",
          sortable: false,
          show_overflow_tooltip: false,
        },
        // {
        //   prop: "createTime",
        //   label: "发布时间",
        //   width: "auto",
        //   sortable: false,
        //   show_overflow_tooltip: true,
        // },
      ],

      formColumns: [
        { is_required: 1, col: "newsTitle", label: "标题" },
        {
          is_required: 1,
          col: "channelId",
          label: "所属分类",

          type: "select",
          labelKey: "channelName",
          valueKey: "channelId",
          apiConfig: {
            url: "/app/system/newsChannel/list",
            method: "get",
            data: {
              page: 1,
              pageNum: 100,
            },
          },
        },

        {
          is_required: 1,
          col: "newsType",
          label: "新闻类型",

          type: "select",
          labelKey: "title",
          valueKey: "id",
        },
        { is_required: 1, col: "newsCover", label: "关键字" },
        {
          is_required: 1,
          col: "newsCover",
          label: "新闻封面",

          type: "upload-image",
          upload_multiple: false,
          upload_limit: 1,
          cache_key: "upload_file_list", //图片上传回显
        },

        {
          is_required: 1,
          col: "relatedNewsId",
          label: "相关新闻",
        },
        {
          is_required: 1,
          col: "newsContents",
          label: "新闻内容",

          type: "rich-editor",
        },
      ],

      searchControl: {
        hide: false,
        actions: ["分类筛选", "标题搜索"],
        searchCate: {
          show: true,
          form: {
            channelId: "",
          },
          option: {
            is_required: 1,
            col: "channelId",
            label: "所属分类",
            val: "",
            width: "100",
            type: "select",
            labelKey: "channelName",
            valueKey: "channelId",
            apiConfig: {
              url: "/app/system/newsChannel/list",
              method: "get",
              data: {
                page: 1,
                pageNum: 100,
              },
            },
          },
        },
      },
      showTableBatchSelect: false,
      utilForAddSortFilter: [
        //
        { tag: "btn", title: "添加", type: "primary" },
      ],
      utilForPublish: [
        {
          tag: "btn",
          title: "删除",
        },
      ],
      tableRowShowSelect: false,
      tableRowActionButtons: ["编辑", "删除"],

      idTextMap: {},

      dataList: [],

      add_inputVisible: false,
      add_inputValue: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.setView();
  },
  mounted() {},
  methods: {
    setView() {
      this.$api({
        url: "/app/user/tags/userTagList",
        method: "get",
        data: {
          type: 2,
          // page: 1,
          // pageNum: 100,
        },
      }).then((res) => {
        console.warn("获取分类配置", res);
        if (res.code == 200) {
          res.data.forEach((v) => {
            v.inputVisible = false;
            v.inputValue = "";
            v.ref = "saveTagInput" + v.id;
          });
          this.dataList = res.data;
        }
      });
    },

    handleCloseV1(v1) {
      this.$api({
        url: "/app/user/tags/" + v1.id,
        method: "delete",
        data: {},
      }).then((res) => {
        if (res.code == 200) {
          this.setView();
        }
      });
    },

    handleCloseV2(v2) {
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);

      this.$api({
        url: "/app/user/tags/" + v2.id,
        method: "delete",
        data: {},
      }).then((res) => {
        if (res.code == 200) {
          this.setView();
        }
      });
    },

    showInput(v1) {
      console.warn("分组", { ...v1 });
      v1.inputVisible = true;

      this.$nextTick((_) => {
        // console.warn("输入框", this.$refs[v1.ref]);
        // console.warn("输入框", this.$refs[v1.ref].$refs.input);
        // this.$refs[v1.ref].$refs.input.focus();

        // this.$refs[v1.ref].focus();

        let dom = document.querySelector('.cus-v2-input[data-id="' + v1.id + '"]');
        console.warn("dom", dom);
        if (dom) {
          dom.focus();
        }
      });
    },

    async handleInputConfirm(v1) {
      let inputValue = v1.inputValue.trim();
      if (inputValue) {
        // this.dynamicTags.push(inputValue);
        //新增当前分类
        // api;

        let has_same_name = v1.children.find((v) => v.name == inputValue);

        if (has_same_name) {
          alertErr("当前分类名称已存在！");
        } else {
          let res_add = await this.$api({
            url: "/app/user/tags",
            method: "get",
            data: {
              name: inputValue, //名称
              type: 2, //类型 1 地区 2职业 3座驾 4播客 5个人主页
              selfFlag: "0", //0公开/1私人
              selfId: "", //self_flag = 1 此字段为所属用户id
              parentId: v1.id, //父级id
              remark: "", //备注 播客/主页则是资源url
            },
          });

          if (res_add.code == 200) {
            this.setView();
          }
        }
      }
      v1.inputVisible = false;
      v1.inputValue = "";
    },

    // 新增一级分类
    add_showInput() {
      this.add_inputVisible = true;

      this.$nextTick((_) => {
        let dom = document.querySelector(".cus-v1-input");
        console.warn("dom", dom);
        if (dom) {
          dom.focus();
        }
      });
    },
    async add_handleInputConfirm() {
      let inputValue = this.add_inputValue.trim();
      if (inputValue) {
        // this.dynamicTags.push(inputValue);
        // 新增当前分类
        // api;
        let has_same_name = this.dataList.find((v) => v.name == inputValue);
        if (has_same_name) {
          alertErr("当前分类名称已存在！");
        } else {
          let res_add = await this.$api({
            url: "/app/user/tags",
            method: "get",
            data: {
              name: inputValue, //名称
              type: 2, //类型 1 地区 2职业 3座驾 4播客 5个人主页
              selfFlag: "0", //0公开/1私人
              selfId: "", //self_flag = 1 此字段为所属用户id
              parentId: "", //父级id
              remark: "", //备注 播客/主页则是资源url
            },
          });
          if (res_add.code == 200) {
            this.setView();
          }
        }
      }
      this.add_inputVisible = false;
      this.add_inputValue = "";
    },

    // 新增一级分类
  },
};
</script>

<style scoped lang="less">
.page-wrap {
  .page-inner {
  }
}

.page-ctx-wrap {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
}

// 标签样式
.cus-tag-item {
  margin-right: 15px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.cus-tag-input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  outline: 0;
  padding: 0 15px;
  width: 90px;
  height: 32px;
  line-height: 32px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  &:focus {
    border-color: #66b1ff;
  }
}

// 标签样式

.table-box {
  width: 100%;
  border-collapse: 0;
  /* table-layout: fixed; */
  border: 1px solid #eee;
  font-size: 14px;
}
.table-box tr {
  /* min-height: 40px; */
}
.table-box th {
  text-align: left;
  padding: 10px 10px;

  border-right: 1px solid #eee;
}
.table-box td {
  text-align: left;
  padding: 10px 10px;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
}
.table-box td:nth-child(1) {
  width: 20%;
}
.table-box td:nth-child(2) {
  width: 80%;
}

.table-box .tag-item {
  cursor: pointer;
  outline: none;
  user-select: none;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  color: #333;
}

.table-box .tag-item:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-0.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 3px;
}

.table-box .tag-item.checked:before {
  background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-1.png");
}
</style>
